<template>
  <div class="fileBrowser-comp-ct">
  
  <mt-header :title="header_title" fixed>
    <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
  </mt-header>
  <div class="container">
    <h2>{{curDir}}</h2>
    <hr>
    <div class="list_main">
      <div v-for="(item,idx) in fileList" :key="idx" @click="onclick(item)">
          <mt-cell  :title="item.name"  :label="item.fullPath" >
            <i class="iconfont icon-file" slot="icon" v-show="item.isDirectory"></i>
            <i class="iconfont icon-text" slot="icon" v-show="item.isFile"></i>
          </mt-cell>
      </div>
    </div>

  </div>
  </div>
</template>
<script>
import FileUtil from "@/cordova_plugins/FileUtil.js";

export default {
  name: 'fileBrowser'
  ,data(){
    return {
      header_title: 'fileBrowser',
      fileList:[],
      curDir:'./'
    }
  },methods: {
    openDir(path) {
      console.log(path)
      this.curDir = path
      return false
      //根据路径获取文件夹下所有文件列表
      FileUtil.getFileList(path,(entrys)=>{
        console.log(entrys);
        this.fileList = entrys;
      })
    },
    openFile(){

    },
    onclick(data){
      if(data.isDirectory){
        this.openDir(data.fullPath)
      }else{
        alert('open file')
      }
    },
    newDir(){
      //新增文件夹
    },
    newFile(){
      //新建text文件
    }
  },mounted () {
    this.fileList = [
        {name:'testDir1',fullPath:'./testDir1',isDirectory:true},
        {name:'testDir2',fullPath:'./testDir2',isDirectory:true},
        {name:'testDir3',fullPath:'./testDir3',isDirectory:true},
        {name:'testFile.txt',fullPath:'./testFile.txt',isFile:true}
      ];
      
      FileUtil.getFileList('./',(entrys)=>{
        console.log(entrys);
      })
  },
}
</script>
<style lang="scss" scoped>
.fileBrowser-comp-ct {
 .list_main{
   width: 100%;
   height: 400px;
   overflow-y:auto;
   text-align: left;

   .iconfont{
     font-size: 25px;
   }
 }
}
</style>
